<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ele{
            color:red;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        // let HElement = React.createElement("h1",{title:"hello"},"这是标题");
        // let PElement = React.createElement("p",null,"这是段落");
        // let ParentElement = React.createElement("div",null,HElement,PElement);
        let HElement = function(props){
            // let title = "这是标题";
            return <h1 title="hello" style={{color:"blue"}}>{props.children}</h1>;
        }
        let random = function(number){
            return parseInt(Math.random() * number)
        }
        let PElement = function(props){
            
            let style = {
                color:`rgb(${random(256)},${random(256)},${random(256)})`,
                backgroundColor:"yellow",
                width:"200px",
                height:"200px"
            };
            return <p style={style}>这是段落{props.index}</p>
        }
        let ParentElement = function(){
            let ary = [];
            for(let i = 0;i < 10;i++){
                ary.push(<PElement index={i} />);
            }
            return (
                <div>
                    {/* jsx注释 */}
                    <HElement>一级标题</HElement>   
                    {ary}
                </div>
            )
        }
        ReactDOM.createRoot(document.getElementById("root")).render(<ParentElement />);

        // 通过React渲染字母卡片，每张卡片都有相同的宽和高，其中背景颜色和字体颜色不一样
    </script>
</body>
</html>